<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办事项</title>
</head>
<body>
 <input type="text" id="content">
 <button type="button" id="add-btn">添加</button>
 <h1 id="todo-h1">代办 <span>(5)</span></h1>
 <ul id="todo-ul">
<!--     <li>-->
<!--         <span>学习vue</span>-->
<!--         <button type="button">完成</button>-->
<!--         <button type="button">删除</button>-->
<!--     </li>-->
<!--     <li>-->
<!--         <span>学习Java</span>-->
<!--         <button type="button">完成</button>-->
<!--         <button type="button">删除</button>-->
<!--     </li>-->
 </ul>
 <h1 >已完成 <span></span></h1>
 <ul id="finished-ul">
<!--     <li>-->
<!--         <span>学习vue</span>-->
<!--         <button type="button" >删除</button>-->
<!--     </li>-->
<!--     <li>-->
<!--         <span>学习Java</span>-->
<!--         <button type="button">删除</button>-->
<!--     </li>-->
 </ul>
 <SCRIPT>
  var content = document.getElementById('content')
  var addBtn = document.getElementById('add-btn')
  var todoUl = document.getElementById('todo-ul')
  var todoH1 =document.getElementById('todo-h1')
  //为添加按钮添加点击事件
  addBtn.onclick = function (){
    addTodo()
  }
  var enterKeyCode = 13;
  //为输入框添加键盘事件,键盘事件需要判断是否是指定的键
  content.onkeyup = function (e){
      //keyCode属性，获取每个键的值
     // console.log(e.keyCode)
      if (e.keyCode == enterKeyCode){
          addTodo()
      }
  }
  //声明一个数组来接收添加的值
  var todos = [];
  //定义一个方法来将添加的值，输出到li标签里
  function renderTodos(){
    var html = '';
    for (var i=0;i<todos.length;i++){
        //todo为此时的具体的一个添加的对象
       var todo =todos[i]
       html +='     <li>\n' +
           '         <span>' + todo + '</span>\n' +
           '         <button type="button" class="add-finish" index="' + i + '">完成</button>\n' +
           '         <button type="button">删除</button>\n' +
           '     </li>'
    }
    //向ul标签里面添加
    todoUl.innerHTML = html;
    //改变括号里统计数量
      todoH1.firstElementChild.innerText='(' + todos.length + ')'
  }
  renderTodos();
   function addTodo(){
      //获取添加的值
       var value = content.value;
      //校验 trim检测字符串里面的空格
      if (!value.trim()){
          alert('请输入内容')
          return
      }
      //校验通过添加到输入框离
       todos.push(value)
       renderTodos();
      //清空输入框
       content.value = '';
   }

   var finishedUl = document.getElementById('finished-ul')
   var addFinishses = document.getElementsByClassName('add-finish')
  for (var i=0;i<addFinishses.length;i++){
      var addFinish =addFinishses[i]
      addFinish.onclick = function (e){
          console.log(e.target)
      }
  }
 </SCRIPT>
</body>
</html>